<template>
  <div>
    <el-form label-width="80px" :data="SkuInfo">
      <el-form-item label="SPU名称">
        {{spu.spuName}}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="sku名称" v-model="SkuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input placeholder="价格(元素)" v-model="SkuInfo.price" type="number"></el-input>
      </el-form-item>
      <el-form-item label="重量">
        <el-input placeholder="重量(千克)" v-model="SkuInfo.weight" type="number"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" v-model="SkuInfo.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item :label="attr.attrName" v-for="(attr,index) in SkuAttrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.AttrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="attrValue in attr.attrValueList" :key="attrValue.id" ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item :label="attr.saleAttrName"  v-for="attr in SkuSaleAttrList" :key="attr.id">
            <el-select v-model="attr.AttrIdAndValueId" placeholder="请选择">
              <el-option :label="attrValue.saleAttrValueName" :value="`${attr.id}:${attrValue.id}`" v-for="attrValue in attr.spuSaleAttrValueList"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表" >
        <el-table
          :data="SkuImageList"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="80">
          </el-table-column>
          <el-table-column
            width="width"
            label="图片" >
            <template slot-scope="{ row, $index }">
              <img :src="row.imgUrl" style="width:100px;height:100px">
            </template>
          </el-table-column>
          <el-table-column
            width="width"
            prop="imgName"
            label="名称" >
          </el-table-column>
          <el-table-column
            width="width"
            label="操作" >
            <template slot-scope="{ row, $index }">
              <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">默认操作</el-button>
              <el-button v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="Cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
	name:"SkuForm",
  props: {

  },
  components: {

  },
  data() {
	return {
    // 图片数据
    SkuImageList:[],
    //  销售属性
    SkuSaleAttrList:[],
    // 平台属性
    SkuAttrInfoList:[],
    // Sku收集的数据
    SkuInfo:{
      // 父组件传递的数据
      category3Id:0,
      spuId:0,
      tmId:0,
      // 双向绑定获得的数据
      price:"",
      skuDesc:'',
      skuAttrValueList:[],
      skuDefaultImg:"",
      skuImageList:[],
      skuName:'',
      skuSaleAttrValueList:[],
      weight:"" 
    },
    // 父组件spu传递的数据
    spu:{},
    // 选取的图片列表
    ImageList:[]
	};
  },
  computed: {

  },
  watch: {

  },
  created() {

  },  
  mounted() {

  },
  methods: {
    // 获取Sku信息
    async getSkuData(category1Id,category2Id,spu){
      // console.log(category1Id,category2Id,spu);
      // 获取父组件传来的数据
      this.SkuInfo.category3Id=spu.category3Id
      this.SkuInfo.tmId=spu.tmId
      this.SkuInfo.spuId=spu.id
      this.spu=spu 
      // 获取Sku图片数据
      let result=await this.$API.sku.reqSpuImageList(spu.id)
      // console.log(result.data);
      if(result.code==200){
        let list=result.data
        // 给列表中每个数据添加一个isDefault数据
        list.forEach(item=>{
          item.isDefault=0
        })
        this.SkuImageList=list
      }
      // 获取Sku销售属性
      result=await this.$API.sku.reqSkuSaleAttrList(spu.id)
      // console.log(result);
      if(result.code==200){
        this.SkuSaleAttrList=result.data  
      }
      // 获取Sku平台属性
      result=await this.$API.sku.reqAttrInfoList(category1Id,category2Id,spu.category3Id)
      // console.log(result)
      if(result.code==200){
        this.SkuAttrInfoList=result.data   
      }    
    },
    // 勾选按钮点击回调
    handleSelectionChange(val){
      this.ImageList=val
    },
    // 改变默认操作功能
    changeDefault(row){
      // 所有默认操作置0
      this.SkuImageList.forEach(item=>{
        item.isDefault=0
      })
      // 选中的按钮为默认值
      row.isDefault=1
      // 收集默认图片
      this.SkuInfo.skuDefaultImg=row.imgUrl
    },
    // 取消按钮回调
    Cancel(){
      // 切换场景值
      this.$emit('ChangeScene',0);
      // 清除原先的数据
      Object.assign(this._data,this.$options.data())
    },
    async save(){
      // 解构数据
      const {SkuSaleAttrList,SkuAttrInfoList,SkuInfo,ImageList}=this
      // 收集整理销售属性
      SkuInfo.skuSaleAttrValueList=SkuSaleAttrList.reduce((prev,item)=>{
          if(item.AttrIdAndValueId){
            // 解构参数
            const [saleAttrId,saleAttrValueId]=item.AttrIdAndValueId.split(":")
            prev.push({saleAttrId,saleAttrValueId})
          }
          return prev
      },[])
      // 收集整理平属性
      SkuInfo.skuAttrValueList=SkuAttrInfoList.reduce((prev,item)=>{
        if(item.AttrIdAndValueId){
          const [attrId,valueId]=item.AttrIdAndValueId.split(":")
          prev.push({attrId,valueId})
        }
        return prev
      },[])
      // console.log(SkuInfo.skuSaleAttrValueList);
      // console.log(SkuInfo.skuAttrValueList)
      // 整理图片参数
      SkuInfo.skuImageList=ImageList.map(item=>{
        return {
          imgName:item.imgName,
          imgUrl:item.imgUrl,
          isDefault:item.isDefault,
          spuImageId:item.id
        }
      })
      // 发起请求提交参数
      const result=await this.$API.sku.reqAddSku(SkuInfo)
      // 请求成功切换场景值回到Spu组件
      if(result.code==200){
        this.$message({
          type:"success",
          message:"保存成功"
        })
        this.$emit('ChangeScene',0);
      }
      Object.assign(this._data,this.$options.data())
    }
  },
};
</script>

<style scoped lang="less">

</style>
